<template>
  <div style="height:100%">
    <div style="height:100%">
      <div style="width:73.4rem;height:100%;margin:0 auto">
        <Echart :echartObj="echartObj" />
      </div>
    </div>
  </div>
</template>

<script>
import china from 'echarts/map/json/china.json'
import Echart from '@/components/echarts/map.vue'

export default {
  data() {
    return {
      echartObj: {}
    }
  },
  props: ['mapData'],
  components: {
    Echart
  },
  watch: {
    mapData: {
      handler(val, oldVal) {
        // console.log(val);
        
        this.echartObj = {
          color: ['#0070BC'],
          grid: {
            left: 0,
            top: 0,
            bottom: 0,
            right: 0,
            containLabel: true
          },
          background: 'none',
          visualMap: {
            min: 0,
            max: 34,
            text: ['密度高', '密度低'],
            realtime: false,
            show: false,
            calculable: true,
            inRange: {
              color: ['#424E60', '#07B1AC', '#E0C854']
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} 人'
          },

          geo: {
            // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: false,
            zoom: 1.2,
            label: {
              normal: {
                show: true, // 是否显示对应地名

                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#fff'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                // shadowBlur: 20,
                borderWidth: 0
                // shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },

          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo', // 对应上方配置
              name: '籍贯分布情况', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: val
            },
            
          ]
        }
      },
      immediate: true
    }
  },
  created() {}
}
</script>

<style>
</style>